<template>
	<cxView :margin="margin" :padding="padding" :background="background" :height="bgHeight"
		:border-bottom="borderCompute" :borderRadius="borderRadius" :showCircula="showCircula">


		<u-form-item :label="label" :prop="prop" :label-position="labelPosition" :label-width="labelWidth"
			:label-style="labelStyle" :label-align="labelAlign" :right-icon="rightIcon" :left-icon="leftIcon"
			:left-icon-style="leftIconStyle" :right-icon-style="rightIconStyle" :required="required"
			:border-bottom='false'>

			<u-input v-model="data" :type="type" :clearable="clearable" :inputAlign="inputAlign"
				:placeholder="placeholder" :disabled="disabled" :maxlength="maxlength"
				:placeholder-style="placeholderStyle" :confirm-type="confirmType" :custom-style="customStyle"
				:height="height" :trim="trim" :show-confirmbar="true" :adjust-position="true" v-if="showInput"
				@click="confirm">
			</u-input>

			<cxView slot="right">
				<slot name="right"></slot>
			</cxView>
			<slot></slot>
		</u-form-item>
	</cxView>
</template>

<script>
	/**
	 * input 
	 * @property {String} background transparent rgba(0, 0, 0, 0) 透明色
	 * @property {String} type  text,select / password / textarea / number,digit
	 * @property {String} inputAlign  left/center / right
	 * @property {String} placeholderStyle  placeholder的样式，字符串形式，如"color: red;"
	 * @property {String} confirmType  设置键盘右下角按钮的文字，仅在type为text时生效
	 * @property {String} customStyle 	自定义输入框的样式，对象形式
	 * @property {String} showBorder 	是否显示边框
	 * @property {String} height 	text类型时为70，textarea时为100
	 * @property {String} trim 	是否自动去除两端的空格
	 * @property {String} showInput 	是否显示输入框,默认显示,如果在内使用其它组件时,则需要隐藏
	 * @property {String} labelPosition  label位置表单域提示文字的位置，left-左侧，top-上方
	 * @property {String} labelAlign  提示文字的宽度，单位rpx 90/数值 / auto
	 * @property {String} labelWidth  labellable的对齐方式	，left/center / right
	 * 
	 * 
	 */
	export default {
		data() {
			return {
				data: '',
				codeTips: '',
				btnBg: this.$cx.color.cxGreenColor,

			}
		},

		options: {
			styleIsolation: 'shared', // 解除样式隔离
			virtualHost: true
		},
		watch: {
			value: {
				immediate: true,
				handler(val) {
					this.data = val;
				}
			},
			data(val) {
				this.$emit('input', val);
			}
		},
		mounted() {

		},
		computed: {
			borderCompute() {
				let border = ""
				if (this.showBorder) {
					border = '2rpx solid ' + this.borderColor;
				}
				return border;
			},



		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			confirm() {
				this.$emit("confirm", this.data)
			}

		},
		props: {
			bgHeight: {
				type: [String, Number],
				default: ''
			},
			showCircula: {
				type: Boolean,
				default: false
			},
			value: {
				type: [String, Number],
				default: ''
			},
			/**
			 * 表单域model对象的属性名，在使用 validate、resetFields 方法的情况下，该属性是必填的
			 */
			prop: {
				type: String,
				default: ''
			},
			/**
			 * 左侧提示文字
			 */
			label: {
				type: String,
				default: ''
			},
			/**
			 * 表单域提示文字的位置，left-左侧，top-上方，如设置，将覆盖u-form的同名参数
			 */
			labelPosition: {
				type: String,
				default: 'left'
			},
			/**
			 * 提示文字的宽度，单位rpx，如设置，将覆盖u-form的同名参数
			 */
			labelWidth: {
				type: [String, Number],
				default: 'auto'
			},
			/**
			 * lable的样式，对象形式，如设置，将覆盖u-form的同名参数
			 */
			labelStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			/**
			 * lable的对齐方式，如设置，将覆盖u-form的同名参数
			 */
			labelAlign: {
				type: String,
				default: 'left'
			},
			/**
			 * 右侧自定义字体图标(限uView内置图标)或图片地址
			 */
			rightIcon: {
				type: String,
				default: ''
			},
			/**
			 * 左侧自定义字体图标(限uView内置图标)或图片地址
			 */
			leftIcon: {
				type: String,
				default: ''
			},
			/**
			 * 左侧图标的样式，对象形式
			 */
			leftIconStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			/**
			 * 右侧图标的样式，对象形式
			 */
			rightIconStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			/**
			 * 是否显示左边的"*"号，这里仅起展示作用，如需校验必填，请通过rules配置必填规则
			 */
			required: {
				type: Boolean,
				default: false
			},
			/**
			 * 一是长文本内容输入的textarea类型。
二是类似普通输入框的text类型
select / password / textarea / number
			 */
			type: {
				type: String,
				default: 'text'
			},
			/**
			 * 是否显示右侧的清除图标，type = select时无效
			 */
			clearable: {
				type: Boolean,
				default: false
			},
			/**
			 * 输入框文字的对齐方式,
			 * left	center / right
			 */
			inputAlign: {
				type: String,
				default: 'left'
			},
			/**
			 * placeholder显示值
			 */
			placeholder: {
				type: String,
				default: '请输入'
			},
			/**
			 * 是否禁用输入框
			 */
			disabled: {
				type: Boolean,
				default: false
			},
			/**
			 * 输入框的最大可输入长度
			 */
			maxlength: {
				type: [String, Number],
				default: '30'
			},
			/**
			 * placeholder的样式，字符串形式，如"color: red;"
			 */
			placeholderStyle: {
				type: String,
				default: ''
			},
			/**
			 * 	设置键盘右下角按钮的文字，仅在type为text时生效
			 */
			confirmType: {
				type: String,
				default: ''
			},
			/**
			 * 自定义输入框的样式，对象形式
			 */
			customStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			/**
			 * 是否显示边框
			 */
			showBorder: {
				type: Boolean,
				default: false
			},
			/**
			 * 输入框的边框颜色
			 */
			borderColor: {
				type: String,
				default: '#f5f5f5'
			},
			/**
			 * 高度，单位rpx
			 */
			height: {
				type: String,
				default: '60'
			},
			/**
			 * 是否自动去除两端的空格
			 */
			trim: {
				type: String,
				default: ''
			},


			padding: {
				type: String,
				default: ''
			},
			margin: {
				type: String,
				default: ''
			},
			/**
			 * 背景
			 */
			background: {
				type: String,
				default: ''
			},
			/**
			 * 显示input
			 */
			showInput: {
				type: Boolean,
				default: true
			},
			borderRadius: {
				type: [String, Number],
				default: '10'
			}

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 0rpx;
		line-height: 100%;
	}
</style>